<template>
	<view>
		<!--商户列表-->
		<view class="page-top">
			<view class="search-box p-20">
				<u-search placeholder="请输入搜索关键字" v-model="search.q"  @custom="doSearch"></u-search>
			</view>
			<scroll-view class="tabs-box" scroll-x="true">
				<view class="tabs-item" :class="tabsIndex === index ? 'active' : ''" v-for="(item,index) in tabs" @click="tabsClick(index)">
					<text class="icon" :class="item.icon.icon"></text>
					<view class="label">{{item.label}}</view>
				</view>
				<!-- <u-tabs :list="tabs" @click="tabsClick" keyName="label" lineColor="var(--m-color)" :activeStyle="{color:'var(--m-color)',fontSize:'17px'}"></u-tabs> -->
			</scroll-view>
		</view>
		<view style="height:118px"></view>
		<view class="merchants-list">
			<view class="merchants-item" v-for="item in list" @click="navTo('pages/commerce/interaction/show',{id:item.id})">
				<view class="left">
					<u-image radius="5" width="80" height="80" :src="item.storefrontImageUrl" mode="aspectFill"></u-image>
				</view>
				<view class="right">
					<view class="title">{{item.name}} </view>
					<view class="description">{{item.slogan}}</view>
					<!-- <view class="metas mt-20">
						<text>{{item.businessType}}</text>
						<view><u-icon size="16" color="#F00C31" name="heart-fill"></u-icon>{{item.totalLikes}}</view>
					</view> -->
					
					<view class="tags mt-10">
						<text v-for="vv in item.tags">{{vv}}</text>
					</view>
					<!-- <view class="address"><u-icon size="16" class="mr-10" color="#888888" name="map"></u-icon>{{item.address}} </view> -->
				</view>
			</view>
		</view>
		<view class="p-30">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import { getMerchants,getTownCategoies } from '@/config/api.js'
	export default {
		data() {
			return {
				tabs: [],
				tabsIndex:'',
				search:{
					businessType:'',
					q:''
				},
				loading:false,
				page:1,
				size:10,
				status: 'loadmore',
				list:[],
				options:{},
			}
		},
		onLoad(options){
			if(options.q){
				this.search.q = decodeURIComponent(options.q);
			}
			getTownCategoies().then(res=>{
				this.tabs =  res;
			})
			this.getList(true);
		},
		onPullDownRefresh() {
			this.page = 1;
			this.status = 'loadmore';
			this.getList(true);
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			tabsClick(index) {
				this.tabsIndex = index;
				this.page = 1;
				this.status = 'loadmore';
				this.search.businessType = this.tabs[index].value;
				this.getList(true);
			},
			doSearch(){
				this.page = 1;
				this.status = 'loadmore';
				this.getList(true);
			},
			async getList(isRefresh = false){
				if(this.status === 'loading' || this.status === 'nomore'){
					return;
				}
				this.status = 'loading';
				const res = await getMerchants({params:{...{page:this.page,size:this.size},...this.search}});
				const list =  res._embedded?.items || [];
				if(isRefresh){
					this.list = list;
					uni.stopPullDownRefresh()
				}else{
					this.list = this.list.concat(list);
				}
				this.status = res.page.totalElements <= ((res.page.number -1) * res.page.size + list.length) ? 'nomore' : 'loadmore';
				this.page = this.page+1;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.page-top{
		position: fixed;
		height:118px;
		left:0;
		top:var(--window-top);
		z-index:999;
		width: 100%;
		background-color: #f7f7f7;
	}
	.tabs-box{
		white-space: nowrap;
		/* 防止换行 */
		width: 100%;
		
	
		.tabs-item{
			display: inline-block;
			margin-right: 10px;
			padding:20rpx;
			.icon{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
				color:#999999;
			}
			.label{
				margin-top:5px;
				font-size:14px;
				text-align: center;
			}
			&.active{
				color:var(--m-color);
				.label{
					font-size:16px;
					
				}
			}
		}
	}
	.merchants-list{
		.merchants-item{
			background-color: white;
			padding:20rpx;
			border-radius:5px;
			width: calc(100% - 60rpx);
			margin: 30rpx;
			display: flex;
			align-items: stretch;
			.left{
				
			}
			.right{
				padding-left:20rpx;
				flex-grow: 1;
				.title{
					font-size:15px;
				}
				.metas{
					display: flex;
					align-items: center;
					margin-left: -10rpx;
					margin-right: -10rpx;
					text,view{
						font-size:24rpx;
						margin:0 10rpx;
						color:#999999;
					}
					view{
						display: flex;
						align-items: center;
					}
				}
				.description{
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					font-size:24rpx;
					color:#888888;
				}
				.tags {
					margin-left: -10rpx;
					margin-right: -10rpx;
					display: flex;
					flex-wrap: wrap;
					text {
						display: inline-block;
						padding: 2px 8px;
						border-radius: 5px;
						background-color: lightgoldenrodyellow;
						font-size: 20rpx;
						margin: 10rpx;
					}
				}
			}
		}
	}
</style>